<template>
	<Row type="flex">
		<Col flex="1">
		栏目1
		</Col>
		<Col flex="2">
		栏目2
		</Col>
	</Row>
	<Row type="flex" align="center">
		<Col>
		<Form ref="abc" :model="resetpwd" :rules="resetpwdRules" :label-width="80">
			<FormItem label="类型">
				<!-- <template #label>测试</template> -->
				<RadioGroup v-model="type">
					<Radio :label="0">类型1</Radio>
					<Radio :label="1">类型2</Radio>
				</RadioGroup>
			</FormItem>
			<FormItem label="栏目1" prop="name">
				<Input v-model="resetpwd.name" placeholder="请输入栏目1"></Input>
			</FormItem>
			<FormItem label="栏目2-1" prop="age" v-if="type == 0">
				<Input v-model="resetpwd.age" placeholder="请输入栏目2"></Input>
			</FormItem>
			<FormItem label="栏目2-2" v-if="type == 1">
				<Input v-model="resetpwd.age1" placeholder="请输入栏目2"></Input>
			</FormItem>
			<FormItem label="栏目2-3">
				<CheckboxGroup v-model="resetpwd.type" class="d_checkbox">
					<Checkbox :label="0">
						<Tag type="default">栏目1-1</Tag>
					</Checkbox>
					<Checkbox :label="1">
						<Tag type="default">栏目1-1</Tag>
					</Checkbox>
				</CheckboxGroup>
			</FormItem>
		</Form>
		<Form ref="abc1" :model="resetpwd" :rules="resetpwdRules" :label-width="80">
			<FormItem label="栏目3" prop="option">
				<Input v-model="resetpwd.option" placeholder="请输入栏目3"></Input>
			</FormItem>
		</Form>
		<Row type="flex" justify="center">
			<Space type="flex" align="center" size="large">
				<Button type="primary" @click="submit">提交</Button>
				<Button type="default" @click="reset">重置</Button>
				<template #split>-</template>
			</Space>
		</Row>
		</Col>
	</Row>
	<Row style="margin-top:10px;" type="flex" justify="middle">
		<Page :total="100" :page-size="page.size" @on-page-size-change="onPageSizeChange" show-sizer></Page>
	</Row>
	<Row class="container">
		<Button type="primary" @click="openModal">提交</Button>
	</Row>
	<Row>
		<modal1 ref="c-modal1"></modal1>
	</Row>
</template>
<script>
import modal1 from './250916_modal.vue'
export default {
	data() {
		return {
			resetpwdRules: {
				name: [{
					required: true,
					message: '请输入姓名',
					trigger: 'blur'
				}],
				age: [{
					required: true,
					message: '请输入年龄',
					trigger: 'blur'
				}, {
					min: 10,
					message: '最小年龄10岁',
					trigger: 'blur'
				}],
				option: [{
					required: true,
					message: '请输入选项',
					trigger: 'blur'
				}]
			},
			type: 0,
			resetpwd: {
				name: '',
				age: '',
				age1: '',
				type: 0
			},
			page: {
				size: 10,
			}
		}
	},
	components: {
		modal1
	},
	methods: {
		reset() {
			this.$refs['abc'].resetFields();
		},
		submit() {
			this.$refs['abc'].validate(valid => {
				if (valid) {
					this.$Message.info('提交成功')
				} else {
					this.$Message.info('提交失败')
				}
			});
		},
		onPageSizeChange(e) {
			this.page.size = e;
		},
		openModal() {
			this.$refs['c-modal1'].show();
		}
	},
}
</script>
<style lang="scss" scoped>
.container {
	margin: 12px;
}
.d_checkbox {
	::deep .ivu-checkbox {
		display: none;
	}
	::deep .ivu-checkbox-wrapper-checked span {
		color: #1890ff !important;
		// border: #1890ff solid 1px!important;
		// background: rgba(57, 153, 255,0.1);
	}
	::deep .ivu-checkbox-wrapper-checked .ivu-tag {
		border: #1890ff solid 1px !important;
		background-color: #fff;
	}
}
</style>